<script setup lang="ts">
import emojiList from '@/common/emoji'
import type { emojiItem } from '@/common/emoji'

const emit = defineEmits(['emojiSelected'])

const selectEmoji = (emoji: emojiItem) => {
  emit('emojiSelected', emoji.character)
}
</script>

<template>
  <n-scrollbar class="emoji-scroll">
    <div class="emoji-picker">
      <span v-for="emoji in emojiList" :key="emoji" @click="selectEmoji(emoji)">
        {{ emoji.character }}
      </span>
    </div>
  </n-scrollbar>
</template>
<style lang="scss">
.emoji-scroll {
  max-height: 200px;
}
</style>
<style lang="scss" scoped>
.emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6.8px;
  cursor: pointer;
}
.emoji-picker span {
  font-size: 24px;
}
</style>
